import React, {useEffect, useState} from 'react';
import {Button, Modal, notification, Pagination, Popconfirm, Space, Table } from "antd";
import http from "../request";

import {fieldGet} from "../common/common";

const Recycle = (props) => {
    const {url, columns, func, className, change} = props

    const backColumns = [...columns, {
        title: '操作',
        key: 'action',
        render: e => (
            <Space size="middle">
                <Popconfirm title="确定恢复？" okText="确定" cancelText="取消" onConfirm={() => back(e.id)}>
                    <Button type="primary" size="small">恢复</Button>
                </Popconfirm>
                <Popconfirm title="确认删除？删除后无法找回" okText="确定" cancelText="取消" onConfirm={() => del(e.id)}>
                    <Button size="small" danger>删除</Button>
                </Popconfirm>
            </Space>
        )
    }]

    const pagerDefault = {page: 1, pageSize: 10}
    // 回收站
    const [show, setShow] = useState(!1)
    const [select, setSelect] = useState([])
    const [source, setSource] = useState([])
    const [page, setPage] = useState(pagerDefault)
    const [total, setTotal] = useState(0)

    // const [mask, setMask] = useState({show: !1, text: ''})

    useEffect(() => {
        list()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[page])
    useEffect(() => {
        show && list()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [show])

    return (
        <React.Fragment>
            <Button onClick={() => setShow(!0)} type="primary" size="small" danger className={className}>
                <div className="u-flex">
                    <img src={require('../assets/icon/icon-19.png').default} alt=""/>
                    <span className="u-m-l-5">回收站</span>
                </div>
            </Button>
            <Modal title="回收站" width={1280} visible={show} footer={false} onCancel={() => setShow(!1)}>
                <div className="u-p-20">
                    <Table bordered size="small" rowSelection={{
                        selectedRowKeys: select,
                        onChange: e => {
                            setSelect(e)
                        }
                    }} rowKey={e => e.id} dataSource={source} columns={backColumns} scroll={{x: 1280}} pagination={false} />
                    <div className="u-flex u-row-between u-m-t-20">
                        <div className="u-flex">
                            <Popconfirm title="确定恢复？" okText="确定" cancelText="取消" onConfirm={() => back(0)}>
                                <Button type="primary" size="small">恢复</Button>
                            </Popconfirm>
                            <Popconfirm title="确定删除？删除后无法找回" okText="确定" cancelText="取消" onConfirm={() => del(0)}>
                                <Button size="small" danger className="u-m-l-10">删除</Button>
                            </Popconfirm>
                        </div>
                        <Pagination showQuickJumper current={page.page} pageSize={page.pageSize} total={total} onChange={(page, pageSize) => setPage({page, pageSize})} />
                    </div>
                </div>
            </Modal>
        </React.Fragment>
    )

    // 回收站
    function list(){
        http(url+'.recycle.list',
            fieldGet({}, {}, page.page, page.pageSize)
        ).then(res => {
            if(res.code === 1){
                setSource(res.data.rows)
                setTotal(res.data.total)
            }
        }).catch(err=>console.log(err))
    }
    function back(id){
        let ids = id > 0 ? [id] : select
        if(!ids.length){
            notification.error({
                message: '请先勾选'
            })
            return
        }
        http(url+'.recycle.back', {ids}).then(res => {
            if(res.code === 1){
                notification.success({
                    message: res.msg || '操作成功'
                })
                change(!1)
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
            func()
            list()
        })
    }
    function del(id){
        let ids = id > 0 ? [id] : select
        if(!ids.length){
            notification.error({
                message: '请先勾选'
            })
            return
        }
        http(url+'.recycle.del', {
            ids
        }).then(res => {
            if(res.code === 1){
                notification.success({
                    message: res.msg || '操作成功'
                })
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
            func()
            list()
        })
    }
}

export default Recycle;